<template>
  <div class="form-config-container">
    <el-form label-position="top">
      <el-form-item label="标题" >
        <el-input v-model="data.name"></el-input>
      </el-form-item>
      <el-form-item label="默认提示文字" >
        <el-input v-model="data.options.placeholder"></el-input>
      </el-form-item>
      <el-form-item label="数据绑定参数" >
        <el-input v-model="data.model"></el-input>
      </el-form-item>
      <el-form-item label="校验">
        <div>
          <el-checkbox v-model="data.options.required">必填</el-checkbox>
        </div>
        <div>
          <el-input v-model.lazy="data.options.pattern" placeholder="填写正则表达式"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="数据绑定方法名">
        <el-input v-model="data.options.remoteFunc"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "WidgetConfig",
    props: ['data'],
    data () {
      return {
        validator: {
          required: null,
          pattern: null
        }
      }
    },
    methods: {
      generateRule () {
        this.data.rules = []
        Object.keys(this.validator).forEach(key => {
          if (this.validator[key]) {
            this.data.rules.push(this.validator[key])
          }
        })
      }
    },
    watch: {
      'data.options.required': function(val) {
        if (val) {
          this.validator.required = {required: true, message: `${this.data.name}必须填写`}
        } else {
          this.validator.required = null
        }
        this.generateRule()
      },
      'data.options.pattern': function (val) {
        if (val) {
          this.validator.pattern = {pattern: val, message: this.data.name + '格式不匹配'}
        } else {
          this.validator.pattern = null
        }

        this.generateRule()
      }
    },
  }
</script>

<style scoped>

</style>